<!-- 药品展示 -->
<template>
  <div class="app-container">
    <el-input
      v-model="search"
      placeholder="请输入药品名称进行搜索"
      style="width:500px;margin-bottom:20px;"
      prefix-icon="el-icon-search"
      clearable
      @input="handleSearch"
    />
    <el-button
      type="primary"
      icon="el-icon-plus"
      style="margin-bottom:20px;"
      @click="openAddDialog"
    >
      添加药品
    </el-button>
    <el-table
      ref="multipleTable"
      v-loading="listLoading"
      :data="filterData"
      element-loading-text="拼命加载中"
      max-height="500"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" label="药品Id" width="100">
        <template slot-scope="scope">
          <!-- {{ scope.$index }} -->
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="药品名称">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="厂家" width="200" align="center">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.producer }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="药品数量" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.counts }}
        </template>
      </el-table-column>
      <el-table-column label="单价" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.price }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="生产日期">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.date }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="添加药品"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form
        ref="medicineForm"
        :model="newMedicine"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="药品名称" prop="name">
          <el-input v-model="newMedicine.name" />
        </el-form-item>
        <el-form-item label="厂家" prop="producer">
          <el-input v-model="newMedicine.producer" />
        </el-form-item>
        <el-form-item label="药品数量" prop="counts">
          <el-input-number v-model="newMedicine.counts" :min="0" />
        </el-form-item>
        <el-form-item label="单价" prop="price">
          <el-input-number v-model="newMedicine.price" :min="0" :precision="2" />
        </el-form-item>
        <el-form-item label="生产日期" prop="date">
          <el-date-picker
            v-model="newMedicine.date"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addMedicine">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { fetchListAll } from '@/api/medicine'
import { addNewMedicine } from '@/api/medicine'
// import { mockMedAllData } from './mockData'

export default {
  name: 'SelectExcel2',

  data() {
    return {
      list: null,
      selectionMode: false,
      // listLoading: true,
      listQuery: {},
      // mockMedAllData,
      // data: null,
      multipleSelection: [],
      // downloadLoading: false,
      search: '',
      filename: '',
      dialogVisible: false,
      newMedicine: {
        name: '',
        producer: '',
        counts: 0,
        price: 0,
        date: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入药品名称', trigger: 'blur' }
        ],
        producer: [
          { required: true, message: '请输入厂家', trigger: 'blur' }
        ],
        counts: [
          { required: true, message: '请输入药品数量', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入单价', trigger: 'blur' }
        ],
        date: [
          { required: true, message: '请选择生产日期', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    filterData() {
      const search = this.search.toLowerCase()
      if (!search) return this.list

      return this.list.filter(item => item.name.toLowerCase().includes(search))
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // toggleSelectionMode() {
    //   this.selectionMode = !this.selectionMode
    //   if (!this.selectionMode) {
    //     // 当退出选择模式时清除所有选择
    //     this.$refs.multipleTable.clearSelection()
    //   }
    // },
    fetchData() {
      // this.list = this.mockMedAllData
      // this.listLoading = false
      fetchListAll().then(response => {
        const items = response.medicines

        // items.sort((a, b) => a.name.localeCompare(b.name))
        this.list = items
        this.listLoading = false
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    handleSearch() {
      // 清除选中状态
      this.$refs.multipleTable.clearSelection()
    },
    openAddDialog() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.medicineForm.resetFields()
      })
    },
    addMedicine() {
      this.$refs.medicineForm.validate((valid) => {
        if (valid) {
          addNewMedicine(this.newMedicine).then(response => {
            this.$message({
              type: 'success',
              message: '药品添加成功!'
            })
            this.dialogVisible = false
            this.fetchData() // 刷新数据
          }).catch(() => {
            this.$message({
              type: 'error',
              message: '药品添加失败!'
            })
          })
        } else {
          return false
        }
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}
</script>
